<template>
  <div>
    <div class="header">
      <!-- 折叠图片 -->
      <div class="collapse-btn" @click="collapseChange">
        <Menu style="width: 1em; height: 1em; margin-right: 8px" />
      </div>
      <div class="header-right">
        {{ store.state.pageName }}
      </div>
      <div class="header-right">
        <div class="btn-fullscreen" @click="handleFullScreen">
          <el-tooltip :content="fullscreen ? '取消全屏' : '全屏'" placement="bottom">
            <FullScreen style="width: 1em; height: 1em; margin-right: 8px" />
          </el-tooltip>
        </div>
        <div class="user-avator">
          <img src="@/assets/img/logo1.png" />
        </div>
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ adminName }}
            <CaretBottom style="width: 1em; height: 1em; margin-right: 8px" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="modify">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-dialog title="修改密码" v-model="updateDialogVisible" width="400px" center>
        <el-form :model="ruleForm" label-width="100px">
          <el-form-item prop="password" label="新的密码" size="mini">
            <el-input type="password" v-model="ruleForm.password" placeholder="新密码"></el-input>
          </el-form-item>
          <el-form-item prop="newPwd" label="确认密码" size="mini">
            <el-input type="password" v-model="ruleForm.newPWD" placeholder="确认密码"></el-input>
          </el-form-item>
        </el-form>
        <span>
          <el-button size="mini" @click="updateDialogVisible = false">取消</el-button>
          <el-button size="mini" @click="modifyPassword">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
// import { mixin } from '../mixins/index'
import { ref, reactive, onMounted } from 'vue'
// import bus from '../assets/js/bus.js'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { SM3 } from '@/utils/sm3.js'

// const pageName = ref('电影管理')

const router = useRouter()
const store = useStore()

const collapse = ref(false)
// 折叠侧边栏
function collapseChange() {
  collapse.value = !collapse.value
}

// 控制是否开启全屏模式
const fullscreen = ref(false)
// 全屏事件
function handleFullScreen() {
  if (fullscreen.value) {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.msExitFullScreen) {
      document.msExitFullScreen()
    }
  } else {
    const element = document.documentElement
    if (element.requestFullscreen()) {
      element.requestFullscreen()
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.msExitFullScreen) {
      document.msExitFullScreen()
    }
  }
  fullscreen.value = !fullscreen.value
}

const updateDialogVisible = ref(false)
const handleCommand = (command) => {
  // ElMessage.success(`click on item ${command}`)
  if (command === 'logout') {
    sessionStorage.removeItem('Admin')
    ElMessage.success('退出登录')
    router.push('/Login')
    sessionStorage.clear()
    store.commit('setAdmin', false)
  }
  if (command === 'modify') {
    updateDialogVisible.value = true
  }
}

const adminName = ref('')
// 获得初始显示的信息
function displayAdmin() {
  adminName.value = sessionStorage.getItem('Admin')
}

onMounted(() => {
  displayAdmin()
})

const ruleForm = reactive({
  password: '',
  newPWD: ''
})
// 提交修改的密码
function modifyPassword() {
  // 使用axios通信
  if (ruleForm.password === ruleForm.newPWD) {
    ruleForm.newPWD = SM3(ruleForm.newPWD)
    console.log(ruleForm.newPWD)
    axios
      .get(
        '/api/admin/updateAdminPwd' +
          '/' +
          sessionStorage.getItem('aid') +
          '/' +
          ruleForm.newPWD
      )
      .then(() => {
        ElMessage.success('修改密码成功！请重新登录')
        router.push('/Login')
      })
      .catch(() => {
        ElMessage.warning('修改失败！')
      })
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/adminHeader.scss';
</style>
